const { ref, onMounted } = Vue

;(() => {
  let link = document.createElement('link')
  link.href = `${config.RP}/html/route/author/author.css`
  link.rel = 'stylesheet'
  document.head.appendChild(link)
})()

let template = {
  name: 'author',
  template: '',
  setup() {
    const authorList = ref([])
    const loading = ref(false)
    const authorDialogTitle = ref('添加作者')
    const authorDialogVisible = ref(false)
    const authorForm = ref({
      name: '',
      img: '',
      description: '',
    })
    const authorFormRules = ref({
      name: [{ required: true, message: '请输入' }],
    })
    const authorName = ref('')
    const selectAuthor = ref({})
    const authorRef = ref('')
    const pagination = ref({
      count: 0,
      page: 1,
      limit: 10,
    })

    async function getAuthors() {
      let res = await Http('/author/find_author', { name: authorName.value, page: pagination.value.page, limit: pagination.value.limit })

      if (res && res.code === 200) {
        authorList.value = res.data.authors
        pagination.value.count = res.data.count
      }
    }
    async function addAuthor() {
      if (authorDialogTitle.value === '更新作者信息') {
        return updateAuthor()
      }

      await authorRef.value.validate()

      let res = await Http.post('/author/add', authorForm.value)

      if (res && res.code === 200) {
        authorDialogVisible.value = false
        searchAuthor()
        ElMessage.success(res.message)
      } else {
        ElMessage.error(res.message)
      }
    }
    async function updateAuthor() {
      let res = await Http.post('/author/update', {
        id: selectAuthor.value.id,
        ...authorForm.value,
      })

      if (res && res.code === 200) {
        authorDialogVisible.value = false
        searchAuthor()
        ElMessage.success(res.message)
      } else {
        ElMessage.error(res.message)
      }
    }
    async function deleteAuthor(id) {
      let res = await Http.post(`/author/delete`, { id })

      if (res && res.code === 200) {
        searchAuthor()
        ElMessage.success(res.message)
      } else {
        ElMessage.error(res.message)
      }
    }

    // 搜索
    async function searchAuthor() {
      pagination.value.page = 1
      getAuthors()
    }

    /**
     * 上传成功
     * @param {*} data
     */
    function handleAvatarSuccess(res) {
      if (res.code === 200) {
        ElMessage.success('上传成功')
        authorForm.value.img = res.data.filePath
      } else {
        ElMessage.error(res.message)
      }
    }

    function handlecurrentChange(page) {
      pagination.value.page = page
      getAuthors()
    }

    function addUpdateAuthorVisible() {
      authorDialogVisible.value = true
      authorDialogTitle.value = '添加作者'
    }

    function editAuthor(row) {
      authorDialogVisible.value = true
      authorDialogTitle.value = '更新作者信息'
      selectAuthor.value = row
      authorForm.value.name = row.name
      authorForm.value.img = row.img
      authorForm.value.description = row.description
    }

    onMounted(() => {
      searchAuthor()
    })

    return {
      authorList,
      loading,
      authorForm,
      authorFormRules,
      authorName,
      authorDialogTitle,
      authorDialogVisible,
      authorRef,
      pagination,
      addAuthor,
      updateAuthor,
      deleteAuthor,
      searchAuthor,
      handleAvatarSuccess,
      addUpdateAuthorVisible,
      editAuthor,
      handlecurrentChange,
    }
  },
}

export default {
  async load() {
    const { name } = template

    return fetch(`${config.RP}/html/route/${name}/${name}.html`)
      .then((res) => res.text())
      .then((html) => {
        template.template = html
        window.app.component(name, template)
      })
  },
}
